<template>
  <div style="">
    <div
      v-if="isEdit"
      style="font-size: 5px; width: 80px; display: flex; flex-direction: row"
    >
      <!-- 改修改框样式去下面style里 -->
      <input v-model="newVal.galleryName" class="input" />

      <div @click="save" class="btn">
        <!-- 自定义保存按钮 -->
        <slot name="save"></slot>
      </div>

      <div @click="cancel" class="btn">
        <!-- 自定义取消按钮 -->
        <slot name="cancel"></slot>
      </div>
    </div>

    <span
      v-else
      @click="edit"
      style="font-size: 5px; display: flex; flex-direction: row"
    >
      <!-- 自定义文字样式 -->
      <div class="text">
        {{ newVal.galleryName | ellipsis }}
      </div>

      <!-- 自定义编辑按钮 -->
      <slot name="button"></slot>
    </span>
  </div>
</template>

<script>
import { renameGallery } from "@/api/myInfoTeacher/gradegallery";

export default {
  props: {
    val: {
      //文字显示
      default: "",
    },
  },

  data() {
    return {
      nameEditText: "nameEditText",
      newVal: this.val,
      backUp: null,
      isEdit: false,
    };
  },

  methods: {
    // 去除编辑状态
    cancel() {
      this.newVal = this.backUp;
      this.isEdit = false;
    },

    // 点击编辑
    edit() {
      //先让其他的 编辑框为 flase
      this.$parent.$children
        .filter((item) => item.nameEditText == "nameEditText")
        .forEach((items) => {
          items.isEdit = false;
        });
      this.isEdit = true;
      this.backUp = this.newVal;
    },

    // 保存编辑($emit传递给父组件)
    // 同时清空状态
    save() {
      this.isEdit = false;
      // 传递给父组件
      this.$emit("result", this.newVal);
      console.log(this.newVal);
      this.renameClassGallery(this.newVal);
    },

    // 图库重命名
    async renameClassGallery(data) {
      const dataTest = {
        galleryId: data.galleryId,
        galleryName: data.galleryName,
      };
      const res = await renameGallery(dataTest);
      console.log(res, "name");
    },
  },

  // 过滤器
  filters: {
    // 显示文本限制
    ellipsis(value) {
      if (value.length > 5) {
        return value.slice(0, 5) + "...";
      } else {
        return value;
      }
    },
  },
};
</script>

<style scoped>
/* 自定义修改框样式 */
.input {
  border: 1px solid rgb(0, 0, 0, 0.1);
  border-radius: 3px;
  width: 4rem;
  height: 1.25rem;
  font-size: .375rem;
  align-items: center;
}

/* 自定义文字样式 */
.text {
  font-size: .375rem;
  /* font-weight: bold; */
}

/* 保存、取消按钮样式 */
.btn {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
